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This tutorial is designed to demonstrate the various parts of a TW skin file and hopefully help users 
to understand the best way to make a skin file for TW. Skin files have the extension .skn and are 
located by default in C:\Program Files\The Word\Skins. Skin files can also be read from other 
locations on your hard drive (see this page for TW file locations). These skin files should be created 
and saved using Notepad (or any other text editor). Before we begin several recommendations need 
to be made: 


1. Use a successful and full (see below) skin file as a basis to make a new skin file. This will greatly 
help you not to make unnecessary changes to a skin file that will only waste your time. You can 
download a sample skin file with all entries attached. 


2. There is a very good skin editor for the library that TW uses. It is called Silverpoint SkinEditor. You 
can download it here. This editor allows you to see the skin as you make it. It also facilitates 
choosing to colors and such. It also allows you to make skins based upon existing skins in the library. 
The primary problem with this method is that sometimes it is difficult to know where exactly each 
entry in the skin is used in TW. The remainder of this tutorial will deal primarily with making a skin 
by altering the .skn file in a text editor. If you do use the SkinEditor (I would recommend doing so), 
be sure to check the skin in TW before distributing it. 


3. It is best to design your skin first, then make the skin from that design. Adobe Photoshop is a fine 
program to use to design a skin, or if you can’t afford that, Paint.net is a good substitute, or The 
Gimp. The point is that you want a skin designed already so that you can just pick colors from that 
design to insert into the skin file. This will make it MUCH easier. Another method | have found 
successful is to use a program that you already find attractive and copy that skin. Simply open a 
screenshot in your photo editor and get to work! 


With that, we can begin. First open your starting skin file in your text editor. | will mark the various 
parts that the skin paints with a bright red color so it is easy to see. Beginning from the top, we see 
each entry has the name of the entry in brackets. Most of these names are self-explanatory. Those 
that are not so clear | will explain. 


The first entry [Skin] contains the various settings for the entire skin. The “Name” indicates the 
name of the skin that will be displayed within TW. The file name and this setting are different; they 
do not necessarily have to be the same. The next 3 entries do not do anything, but leave them there 
just in case. The last entry under [Skin] is the TitleBarBorderSize. This controls the number of pixels 
of the main window border when the window is not maximized. See [Window] setting for more 
information. 


At this point a short overview of the format of the entries is necessary. The color formats are 
important. The color format is: SOO0<6-digit hex value with the three pairs reversed in their order>. 
Like this: if the hex value is 46D8FB, think of this as three pairs (RGB), 46-D8-FB. So, you don’t 
reverse the pairs themselves, but the order of the three sets. So, it would be FB-D8-46 (BGR). So, if 
the hex value of the color you want it FFEBOO, the color entry in the skin will be SOOOOEBFF. Another 
example: hex value for color is A3C6AF, the value to be placed in the skin is SOOAFC6A3. The skins 
also support major colors formatted like this: red = clRed, blue = clBlue, lime = clLime. If you do not 
want to place a color, which will make that entry transparent, enter clNone. All colors in the skin are 
formatted in this way. 


Each entry is formatted as such: 


Normal.Body=9, SOOFCFBFA, SOOF3FOEB, SOOE8E2D9, SOOF1EDE5 

This entry is the body of the part to be painted. The number represents the style of painting. The 
styles for the “body” section are as follows: 

0 = solid color 

1 = vertical gradient with 2 colors 

2 = horizontal gradient with 2 colors 

3 = vertical glass gradient with 4 colors; each color is evenly spaced 

4 = horizontal glass gradient with 4 colors; each color is evenly spaced 

5 = vertical mirror gradient with 4 colors; the first two colors are evenly spaced, there is a distinct 
break at the midpoint, and the remaining two colors are evenly spaced; this is like two separate 
gradients together (see screenshot) 

6 = horizontal mirror gradient with 4 colors; same as 5, but only horizontal 

7 = vertical mirror gradient with 4 colors with 30% midline; same as 5 and 6 above, except the 
midline is at approximately 30% of the overall height 

8 = horizontal mirror gradient with 4 colors with 30% midline; same as 7, only horizontal 

9 = vertical mirror gradient with 4 colors with 9 pixel midline; same as 8, except the midline is only 
about 9 pixels from the overall height; this is the style used with the Vista themes to mimic the 
theme of the Vista OS 

10 = horizontal mirror gradient with 4 colors with 9 pixel midline; same as 9, only horizontal 


You will need to experiment with the above to achieve your desired result. The skin editor is a good 
place to try out the different styles. Also, check current themes to try to understand the ways to 
use the different styles. If any style is used that only employs 1 or 2 colors (styles 0, 1, and 2), the 
last two colors in that entry will be ignored. 


Normal.Borders=0, clWhite, clSilver, clNone, clNone 

This entry sets the border for the part that is to be painted. There are three styles for borders: 
0 = rectangle border; regular square border 

1 = rounded rectangle border; rectangle border with a 1-pixel rounding at the corners 

2 = double-rounded rectangle border; rectangle border with a 2-pixel rounding at the corners 


The colors for the .Borders setting are four in this order: 
1° = outside top left 

2" = outside bottom right 

3" = inside top left 

4™ = inside bottom left 


Unlike the colors for the .Body setting, none of these colors are ignored at any time. So, if you do 
not want an inside border, you must set the last 2 colors to clNone. 


Normal.TextColor=clNone 
This setting simply sets the color of any text for this item in the skin. The colors follow the same 
format as all other colors. There is only one color and style. 


The [Dock] entry is the background for all of the toolbar and menu areas. This is probably one of the 
most important parts of the skin because this part is seen more than almost any other part of the 
skin. By making the toolbar and menubar settings transparent, this [Dock] setting shows through, 
making a nice effect. This effect is used very often in the skins that ship with TW. See below. 
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The [DockablePanel] is easiest to see with the screenshot below. 
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For God so loved - This does not mean that God approved the conduct of men, but that he had benevolent feelings toward them, or 
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The [DockablePanelTitleBar] is the titlebar for each separate view. This is only seen if the “Caption 
Color” is set to “No colors and border”. See below. 
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The [Gutter] is the area at the left of the menus, where checks would appear. See below. 
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The [MenuBar] is the area of the regular menu. If this area is left with clNone as the color, the 
background [DockablePanel] shows through. Study a skin to see this effect. See below. 


The [OpenToolbarltem] is a setting only for the pressed menu item in the main program menu. See 
below. 


e Word 
is Help Verse: | Verse re 


New Bible view 
~ New Book view 
New Bible search view 


New Book search view 


The [Panel] is similar to [DockablePanel]. See below. 
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The [Separator] is the line between different items on the toolbars. See below. 
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As far as | know the [Splitter] is not used in TW. 

The [StatusBar] is pretty self-explanatory. It is the bar across the bottom of TW’s main window. 
The [StatusBarGrip] is not currently used in TW. 

The [TabBackground] is not used in TW. 

The [Toolbar] is pretty self-explanatory. These items are only the normal mode, not pressed, 


checked, etc. If the colors are left a clNone, the [Dock] colors will be seen. This does not include the 
menubar. See below. 
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The [ToolbarGrip] is the grip the moves the toolbar. The skin takes the first two colors of the .Body 
setting and uses it at the main color and shadow color of the toolbar grip. Zoom into the screenshot 
to see an example, the first color is clRed; the second is clLime. Obviously, the .Border and 
.TextColor settings are not used. 
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The [Window] setting is the painting for the main TW window. The .Body colors paint the main 
window, behind all the windows of TW. It is best to make this something that matches the skin 
because it is only seen when views are closed, moved, or resized. The .Border setting paints the 
main window’s border when it is not maximized. The thickness of this border is determined by the 
TitleBarBorderSize at the top of the skin file. Inside and outside borders function the same as in 
other .Border settings. These .Border settings only function if “Use skinned window border” is 


checked at View->Skin. Look closely at the window border in the screenshot below. 
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14 And as Moses lifted up the serpent in the wilderness, 
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15 That whosoever believeth in him should not perish, | 
but have eternal life. 
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The [WindowTitlebar] is the titlebar for the main TW window. Again, the “Use skinned window 
border” must be checked for this to be enabled. This setting can be used to really enhance the 
overall continuity of your skin. See below. 
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Now begins the section of the skin in which various colors are used depending on the user’s input. 
They are summarized as follows: 

Normal.Body — the way the item looks without any user interaction 

Normal.Borders 

Normal.TextColor 

Disabled.Body — the way the item looks when it is disabled 

Disabled.Borders 


Disabled. TextColor 

HotTrack.Body — the way the item looks when it is moused-over, or hovered over with the mouse 
HotTrack.Borders 

HotTrack.TextColor 

Pushed.Body — the way the item looks when the user presses the item 

Pushed.Borders 

Pushed.TextColor 

Checked.Body — the way the item looks when the user checks the item 

Checked.Borders 

Checked.TextColor 

CheckedAndHotTrack.Body — the way the item looks when the user hovers over an already checked 
item 

CheckedAndHotTrack.Borders 

CheckedAndHotTrack.TextColor 


Obviously the .Borders and .TextColor follow accordingly. These entries follow the patterns of those 
above. 


The [MenuBarltem] refers to the items on the menu bar. See screenshot. 
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The [Menultem] refers to each item within the menu popup. This also refers to the checks within 
the menus. See screenshot. 
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The [Toolbarltem] refers to the individual items on the toolbars. This is distinct from the [Toolbar] 
setting in that this paints only the individual buttons, not the entire toolbar. See below. 
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The [Button] refers to OK buttons and such. These are not currently painted in TW. 
The [CheckBox] is pretty obvious. 
The [EditButton] is shown below. 
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| am not aware of any place in which [Listltem] is used in TW. 


The [ProgressBar] is the setting for the progress bars used especially in the search views in TW. In 
the following screenshot, | painted the Normal.Body setting with clRed, which is the progress bar’s 
background, and the HotTrack.Body setting with clLime, which is the actually progress bar itself. The 
text settings change the percentage text color at the center of the progress bar. The other settings 
under the .Body section are not used. However, all the settings for text of the progress bar are used. 
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The [RadioButton] is the round buttons used in Windows extensively. Some radio buttons and check 
boxes in TW are painted with the skin and some are painted with Windows. Explore to find the 
difference. 


The [Tab] refers to the tabs on the Bible Search View. These are pretty tricky to figure out. You will 
need to experiment. See below. 
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The [TrackBar] is not used in TW, nor is the [TrackBarButton] 


This completes all parts of a TW skin file. Experimentation is the key to making a great skin. | look 
forward to seeing the skins that you have made! 


